<template>
  <div class="common-left-bg" style="margin-top: 20px">
    <dv-border-box-7>
        <div class="common-title">老师课件使用情况</div>
        <dv-charts :option="option" style="height: 210px; width:90%; margin:0 auto;" />

        
    </dv-border-box-7>
  </div>
</template>

<script>

export default {
  name: 'kaoshi',
  data () {
    return {
      option: {
        title: {
          text: ''
        },
        legend: {
          data: [ 
          {
            name: '上传',
            color: 'rgba(55, 162, 218, 0.6)'
          },
          {
            name: '下载',
            color: 'red'
          }
          ],
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 13,
            fill: '#19c3eb'
          }
        },
        xAxis: {
          name: '',
          data: ['每周', '每月'],
          nameTextStyle: {
            fill: '#19c3eb',
            fontSize: 10
          },
          axisLabel: {
            style: {
              stroke: '#19c3eb',
            }
          }
        },
        yAxis: {
          name: '数量',
          nameTextStyle: {
            fill: '#19c3eb',
            fontSize: 10
          },
          data: 'value',
          axisLabel: {
            style: {
              stroke: '#19c3eb',
            }
          }

        },
        series: [
          {
            name: '上传',
            data: [1200, 2230],
            type: 'bar',
            barStyle: {
              stroke: 'rgba(55, 162, 218, 0.6)',
              shadowColor: 'rgba(55, 162, 218, 0.6)'
            },
            backgroundBar: {
              style: {
                fill: 'rgba(55, 162, 218, 0.6)'
              }
            }
          },
          {
            name: '下载',
            data: [1200, 2230],
            type: 'bar',
            barStyle: {
              fill: 'red'
            },
            backgroundBar: {
              style: {
                fill: 'red'
              }
            }
          }
        ]
      }


    }
  }
};
</script>

<style lang="less">
.zujian-title{  text-align: center;color: #ccc; margin:0;padding:0px; line-height:30px; height: 50px; }
</style>
